<template>
  <div id="app">
    <HeaderSearch></HeaderSearch>
    <NavList></NavList>
    <GoodsDesc></GoodsDesc>
    <div class="section">
      <div></div>
    </div>
    <AppFooter></AppFooter>
  </div>
</template>

<script>
import HeaderSearch from './components/HeaderSearch.vue';
import NavList from './components/NavList.vue';
import GoodsDesc from './components/GoodsDesc.vue';
import AppFooter from './components/AppFooter.vue';
export default {
  components: {
    HeaderSearch,
    NavList,
    GoodsDesc,
    AppFooter
  },
  data(){
    return {
      
    }
  }
}
</script>

<style lang="less">
  body,html{
    height: 100%;
    width: 100%;
    
  }
  #app{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  *{
    margin: 0;
  }
  .section{
    height: 180px;
    background: pink;
    width: 100%-5px;
    margin: 0 auto;
  }
</style>
